<template>
    <el-dialog class="edit-dialog" :title="title" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" :label-position="labelPosition" size="small" ref="formRef" :rules="rules">
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="name">
                        <span slot="label">职位名称</span>
                        <el-input autocomplete="off" v-model="form.name" placeholder="请输入职位名称">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="remark">
                        <span slot="label">职位描述</span>
                        <el-input autocomplete="off" v-model="form.remark" placeholder="请输入职位描述">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="submits" size="small">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
     import {Message} from 'element-ui';
    export default {
        data() {
            return {
                value1: '',
                dialogFormVisible: false,
                labelPosition: "top",
                title: "",

                form: {
                    id: '',
                    name: '',
                    remark: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入职位名称',
                        trigger: 'blur'
                    }],
                    remark: [{
                        required: true,
                        message: '请输入职描述',
                        trigger: 'blur'
                    }],
                },

            };
        },
        methods: {
            init(id) {
                console.log(id);
                this.dialogFormVisible = true;
                this.title = id ? '编辑职位' : '添加职位';
                setTimeout(() => { // DOM未渲染，所以开个定时器
                    this.$refs['formRef'].resetFields(); // 重置表单
                    this.form.id = id;

                }, 30);

                if (id) {
                    this.form.id = id;
					this.$http.post("roles/info",{'id':id}).then((response) => {
								
                        this.form.name=response.data.info.name;
                        this.form.remark=response.data.info.remark;
					});
				}
            },
            submits() {
                var thas=this;
                this.$refs['formRef'].validate((valid) => {
                    if (valid) {
                        //alert('submit!');

                      var path="roles/add"
                      if(this.form.id>0){
						  path='roles/edit'
					  }
					  this.$http.post(path,this.form).then((response) => {
					  		
							Message({
								type: 'success',
								message: '保存成功'
							});
							 setTimeout(() => {
                                 console.log('ss submit!!');
								thas.$emit("refreshDataList");
							}, 1500) 
					  });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                console.log(file);
            },
        },
    };
</script>

<style lang="scss">
    .edit-dialog {
        .el-dialog__body {
            padding-top: 0 !important;
        }

        .el-form-item {
            margin-bottom: 5px !important;
        }

        .el-form--label-top .el-form-item__label {
            padding-bottom: 0 !important;
        }

        .el-select {
            width: 100%;
        }

        .el-upload--picture-card {
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
    }
</style>
